<template>
  <view class="hu">
    <div class="nav">
      <uni-icons
        class="icon"
        @click="huitui"
        color="#fff"
        ;
        type="back"
        size="20"
      ></uni-icons>
      <text class="fabu">户型朝向</text>
    </div>

    <view class="box2">
      <img
        class="imgss"
        src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F3afb84b3-9b32-4044-9b31-cd18904e2ec1%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1703940427&t=b340f92fbea362bcf3773f00f1fcab61"
        alt=""
      />

      <view class="scroll">
        <uni-title
          color="#fff"
          type="h2"
          title="请选择户型朝向"
          align="center"
        ></uni-title>

        <view class="bottn">
          <view class="b1">
            <view
              :class="classNames === index ? 'tes1' : 'tes'"
              v-for="(item, index) in titles"
              :key="item.id"
              @click="tab(index)"
            >
              {{ item.title }}
              <view>{{ item.nei }}</view>
            </view>
          </view>
          <view class="b2">
            <view
              v-show="index == classNames ? true : false"
              v-for="(item, index) in divBox"
              :key="index"
              class="divs"
            >
            <template v-if="index === 0">
              <view class="aa"  v-for="(item,index) in huxing" :key="index" @click="houseType(item.id)">
                {{ item.house_type }}
            </view>
            </template>
         
            <template v-if="index === 1">
               <view class="aa" v-for="(item,index) in huxing" :key="index"  @click="chaoType(item.id)">
               {{ item.toward }}
            </view>
            </template>
          
            <template v-if="index === 2">
              <view class="aa" v-for="(item,index) in huxing" :key="index" @click="zhuangType(item.id)">
              {{ item.renovation }}
            </view>
            </template>
           
              <!-- {{ item.dives }} -->
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive,onMounted } from "vue";
// tab切换
const classNames = ref(0);
//接口数据
const huxing = ref();
//户型数据
const hudata = ref();
const hus = uni.getStorageSync('huxing');
hudata.value = hus;
//朝向数据
const chao = ref();
const chaos = uni.getStorageSync('chao');
chao.value = chaos
//装修数据
const zhuangxiu = ref();
const xiu = uni.getStorageSync('zhuang');
zhuangxiu.value = xiu;
// 标题
const titles = reactive([
  {
    id: 1,
    title: "户型",
    nei: hudata.value?hudata.value:'请选择',
  },
  {
    id: 2,
    title: "朝向",
    nei: chao.value?chao.value:"请选择",
  },
  {
    id: 3,
    title: "装修",
    nei: zhuangxiu.value?zhuangxiu.value:"请选择",
  },
]);
// 盒子数据
const divBox = reactive([
  {
    dives: "<view>1</view>",
  },
  {
    dives: "<view>2</view>",
  },
  {
    dives: '<view>3</view>',
  },
]);

// 调用接口
onMounted(() => {
  const address = [];
  //  储存小区数据
  uni.request({
    url: "http://10.31.71.52:7002/housing",
    method: "GET",
    success: (res) => {
      let data = res.data.data;
      console.log(data);
      for (let i = 0; i < data.length; i++) {
        address.push(data[i]);
      }
      huxing.value = address;
    },
  });
});

//点击切换下标
const tab = (index) => {
  classNames.value = index;
};

// 点击户型
const houseType = (id)=>{
  const newdata = huxing.value.find(item=>item.id === id);
  uni.setStorageSync('huxing',newdata.house_type)

}
//点击朝向
const chaoType  = (id)=>{
  const newdata = huxing.value.find(item=>item.id === id);

  uni.setStorageSync('chao',newdata.toward)

}
const path = uni.getStorageSync("path");
//点击装修
const zhuangType = (id)=>{
const newdata = huxing.value.find(item=>item.id === id);
 uni.setStorageSync('zhuang',newdata.renovation);
 uni.navigateTo({url: path})
}



// 回退页面
const huitui = () => {
  uni.navigateTo({
    url: path,
  });
};
</script>

<style lang="scss">
.hu {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  .imgss {
    width: 100%;
    height: 100%;
  }
  .box2 {
    flex: 1;
    position: relative;
    .scroll {
      width: 100%;
      height: 100%;
      background: rgba(33, 31, 31, 0.4);
      position: absolute;
      top: 0;
      left: 0;
    }
  }
  .nav {
    width: 100vw;
    height: 100px;
    background: linear-gradient(to right, #3e85ef, rgb(46, 175, 255));
    position: relative;
    .fabu {
      position: absolute;
      left: 50%;
      top: 60%;
      transform: translate(-50%, -50%);
      color: #fff;
    }
    .icon {
      position: absolute;
      top: 50%;
      left: 10px;
    }
  }
  .bottn {
    width: 100vw;
    height: 270px;
    background-color: #fff;
    position: absolute;
    bottom: 0;
    left: 0;
    overflow: auto;
    box-shadow: 0 5px 15px 10px #4f4e4e;
    .b1 {
      width: 100vw;
      height: 60px;
      display: flex;
      align-items: center;
    }
    .tes {
      display: inline-block;
      width: 33%;
      height: 60px;
      margin-left: 1px;
      text-align: center;
      line-height: 30px;
      margin-top: 4px;
    }
    .tes1 {
      display: inline-block;
      width: 33%;
      height: 60px;
      margin-left: 1px;
      text-align: center;
      line-height: 30px;
      margin-top: 4px;
      border-top: 3px solid #ef9fa6;
      background: linear-gradient(to bottom, #f3d6e5, #fffcfd);
      view {
        font-weight: bold;
        color: #ef9fa6;
      }
    }

    .b2 {
      width: 100vw;
      height: 70%;
      display: flex;
      margin-top: 5px;
      flex-wrap: wrap;
      .divs {
        width: 100%;
        height: 100%;
        overflow: auto;
        .aa{
          width: 100vw;
          height: 35px;
          display: flex;
          justify-content: space-around;
          align-items: center;
          // border-top: 1px solid #ccc;
          border-bottom: 1px solid #ccc;
        }
      }
    }
  }
}
</style>
